<template>
  <div class="orderDetail">
    <div class="orderTable">
      <div class="orderBox">
        <div class="orderNo">
          <div class="orderInfo">
            <div>
              <span
                class="ot"
                style="font-size: 1rem; font-weight: bold"
              >包裹共{{ length }}件
              </span>
              <span
                class="od"
                style="font-size: 1rem"
              >{{
                order.cNextStatusName
              }}</span>
            </div>
          </div>
        </div>
        <div class="fixTitle">
          <div style="padding-right: 26.94rem">
            商品信息
          </div>
          <div style="padding-right: 6.25rem">
            单价
          </div>
          <div style="padding-right: 5.63rem">
            数量
          </div>
          <div style="padding-right: 6.81rem">
            小计
          </div>
          <div>实付</div>
        </div>
        <div
          v-for="item in order.oOrderDetails"
          :key="item.id"
          class="order"
        >
          <div class="order_box">
            <div class="goods">
              <img
                :src="item.DefaultImage"
                alt=""
              >
              <div class="titleBox">
                <div class="tls">
                  {{ item.cProductName }}{{ item.cSpecDescription }}
                </div>
                <!-- <div class="dl">
					查看详情
				</div> -->
              </div>
            </div>

            <div class="type">
              <div>¥{{ item.fSalePrice }}</div>
            </div>

            <div class="orderStatus">
              <div class="status">
                {{ item.iQuantity }}
              </div>
            </div>

            <div class="amount">
              <div class="fee">
                ¥{{ (item.fSalePrice * 1000 * item.iQuantity) / 1000 }}
              </div>
            </div>
            <div class="op">
              <div class="money">
                ¥{{ (item.fSalePrice * 1000 * item.iQuantity) / 1000 }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="orderBox">
        <!-- <div class="orderNo">
          <div class="orderInfo">
            <div>
              <span class="ot">订单号</span>
              <span class="od">{{ order.cOrderNo }}</span>
            </div>
            <div>
              <span class="ot">下单时间</span>
              <span class="od">{{ order.pubuts | formatDate }}</span>
            </div>
          </div>
          <div
            v-if="order.cNextStatus == 'PAYMONEY'"
            class="cancelTips"
            @click="cancelOrder"
          >
            取消订单
          </div>
        </div> -->

        <div class="orders">
          <div class="leftSide">
            <div>
              <div>{{ LogisticsObj.com }}</div>
            </div>
            <div>
              <div>配送企业:</div>
              <div>{{ LogisticsObj.corp_name }}</div>
            </div>
          </div>
          <div class="rightSide">
            <div>
              <div>快递单号:</div>
              <div>
                {{ LogisticsObj.nu
                }}<sapn style="color: #f0406f">
                  {{
                    LogisticsObj.status === "400" ? LogisticsObj.message : ""
                  }}
                </sapn>
              </div>
            </div>
            <div>
              <div>操作员:</div>
              <div>{{ LogisticsObj.by }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="orderBox">
        <div
          v-if="MsgStatus"
          class="orders_iframe"
        >
          <div
            class="buttons"
            @click="toDeail(orderUrl)"
          >
            查看详细物流信息
          </div>
          <!-- <iframe
            id="iframename"
            :src="orderUrl"
            width="100%"
            frameborder="0"
            scrolling="auto"
            name="iframename"
          /> -->
        </div>
        <div
          v-else
          class="orders"
        >
          <div class="msg">
            {{ Msg }}
          </div>
        </div>
      </div>
      <deleteModal
        ref="delModal"
        @refresh="getDetail"
      />
    </div>
  </div>
</template>

<script>
import deleteModal from "../../components/common/deleteModal.vue";
export default {
  components: {
    deleteModal,
  },
  data() {
    return {
      newStatus: 1,
      djs: "00天00小时00分00秒",
      cOrderNo: "",
      iSKUId: "",
      order: {},
      salePoints: "",
      length: "",
      SmallOrder: [],
      LogisticsObj: {},
      orderUrl: "",
      MsgStatus: true,
      Msg: "",
    };
  },
  mounted() {
    console.log("asas", this.$route.query.cOrderNo);
    this.cOrderNo = this.$route.query.cOrderNo;
    setInterval(() => {
      var aaa = parseInt(1929253270350);
      var bbb = new Date().getTime();
      var rightTime = aaa - bbb;
      if (rightTime > 0) {
        var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
        var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
        var mm = Math.floor((rightTime / 1000 / 60) % 60);
        var ss = Math.floor((rightTime / 1000) % 60);
      }
      this.djs = dd + "天" + hh + "小时" + mm + "分" + ss + "秒";
    }, 1000);
    this.getDetail();
    this.LookExpressGetListData(this.cOrderNo);
  },
  methods: {
    //获取订单详情
    getDetail() {
      let params = {
        token: localStorage.getItem("token"),
        data: {
          cOrderNo: this.cOrderNo,
        },
      };
      this.$api.person.getDetail(params).then((res) => {
        if (res.code == 200) {
          console.log("获取订单详情", res.data.oOrderDetails);
          this.order = res.data;
          this.length = res.data.oOrderDetails.length;
        }
      });
    },
    // 获取订单物流信息LookExpressGetList
    LookExpressGetListData(cOrderNo) {
      let params = {
        token: localStorage.getItem("token"),
        data: {
          cOrderNo: cOrderNo,
        },
      };
      this.$api.person.LookExpressGetList(params).then((res) => {
        if (res.code == 200) {
          console.log("获取订单物流信息", res.data);
          this.LogisticsObj = res.data;
          this.GetThirdLogisticsData();
        }
      });
    },
    // 获取第三方物流
    GetThirdLogisticsData() {
      let that = this;
      // 关于物流，调用第三方接口，请求地址和apikey均为两个，分为正式和测试，根据不同环境，来修改不同配置
      const APIURL = "http://116.52.174.53"; // 测试
      const APIkEY = "91297820B7C042059FE4502726C47852"; // 测试apikey
      // const APIURL = 'http://t.inja.com' // 正式
      // const APIkEY = 'EDFAB947B77A44A38E1287AFC005FD8B' // 正式apikey
      that
        .$axios({
          url: `${APIURL}/SCM.TMS7.WebApi/Oauth/GetToken?apikey=${APIkEY}`,
          method: "GET",
          header: {
            "content-type": "application/json;charset=UTF-8",
          },
          data: {},
        })
        .then((res) => {
          console.log("获取第三方物流token", res.data.token);
          // 获取登录token
          that.getpoint(res.data.token);
        })
        .catch((resp) => {
          console.log("请求失败", resp);
        });
    },
    // 登录第三方物流
    getpoint(token) {
      let that = this;
      const APIURL = "http://116.52.174.53"; // 测试
      // const APIURL = 'http://t.inja.com' // 正式
      let datas = {
        Search: {
          QueryModel: {
            Items: [
              {
                Field: "C_ORDER_NO",
                Method: "Equal",
                Value: that.LogisticsObj.nu,
              },
            ],
          },
          PageInfo: {
            CurrentPage: "1",
            PageSize: "10",
          },
        },
        token: token,
      };
      console.log("that.LogisticsObj.nu", that.LogisticsObj.nu);
      that.$axios({
          url: `${APIURL}/SCM.TMS7.WebApi/Order/GetOrderListByPage`,
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
          },
          data: datas,
        })
        .then((res) => {
          console.log("登录第三方物流", res);
          // 将gid和tolens进行加密
          if (res.data.data.list.length === 0) {
            that.MsgStatus = false;
            that.Msg = "未找到物流信息";
          } else {
            let gid = window.btoa(res.data.data.list[0].ORDER_GID);
            let tokens = window.btoa(token);
            // 即页面地址
            that.orderUrl = `${APIURL}/SCM.TMS7.WebUI/OrderInfo/GetOrderByOauthEncrypt?orderGID=${gid}&token=${tokens}`;
            console.log("that.orderUrl", that.orderUrl);
            return that.orderUrl
          }
        })
        .catch((resp) => {
          console.log("登录失败", resp);
        });
    },
    //取消订单弹窗
    cancelOrder() {
      this.$refs.delModal.showM("cancel");
      this.$refs.delModal.getItem(this.order);
    },
    // 跳转
    toDeail(toDeail) {
      window.open(toDeail,'_blank')
    }
  },
};
</script>

<style scoped lang="scss">
.orderDetail {
  .orderTable {
    height: auto;
    // overflow-y: scroll;
  }

  .confirm {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 5rem;
    font-size: 0.88rem;
    color: #7b7b7b;
    background: #fff;
    height: 5rem;
    padding: 0 2.19rem;

    span.djs {
      color: #f0406f;
      padding: 0 0.5rem;
    }

    .opGroup {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 13rem;

      .tuihuo {
        cursor: pointer;

        &:hover {
          text-decoration: underline;
        }
      }

      .queren {
        background: #000;
        color: #fff;
        cursor: pointer;
        text-align: center;
        line-height: 2.38rem;
        width: 7.44rem;
        height: 2.38rem;

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }

  .orderBox {
    // height: 15.81rem;
    background: #fff;
    margin-bottom: 0.56rem;

    .fixTitle {
      height: 3.13rem;
      background: #fff;
      line-height: 3.13rem;
      font-size: 0.88rem;
      color: #333;
      display: flex;
      flex-direction: row;
      margin: 0 2.19rem;
      border-bottom: 0.06rem solid rgba(233, 233, 233, 1);
    }

    .orderNo {
      background-color: #f6f6f6;
      height: 3rem;
      line-height: 3rem;
      display: flex;
      flex-direction: row;
      padding: 0 2.19rem;
      font-size: 0.75rem;
      justify-content: space-between;
      align-items: center;

      .cancelTips {
        color: #f0406f;
        font-size: 0.75rem;
        cursor: pointer;
      }

      .orderInfo {
        display: flex;
        flex-direction: row;

        > div {
          margin-right: 2.69rem;

          .ot {
            color: #666;
            padding-right: 0.75rem;
          }

          .od {
            color: #7b7b7b;
          }
        }
      }

      > img {
        width: 0.88rem;
        height: 0.94rem;
        vertical-align: middle;
        cursor: pointer;
      }
    }

    .orders {
      height: 12.68rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin: 0 2.19rem;
      line-height: 2.5rem;
      .msg {
        color: #999;
        font-size: 0.88rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
      }
      .leftSide {
        width: 30rem;

        > div {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: flex-start;

          > div {
            font-size: 0.88rem;

            &:first-child {
              color: #999;
              width: 5rem;
            }

            &:last-child {
              color: #000;
              font-weight: bold;
              width: 20rem;
              text-align: left;
            }
          }
        }

        .fapiao {
          color: #f0406f;
          font-size: 0.88rem;
          cursor: pointer;

          &:hover {
            text-decoration: underline;
          }
        }
      }

      .rightSide {
        width: 25rem;

        > div {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: flex-start;

          > div {
            font-size: 0.88rem;

            &.paymoeny {
              color: #f0406f !important;
            }

            &:first-child {
              color: #999;
              width: 5rem;
              text-align: right;
            }

            &:last-child {
              color: #000;
              font-weight: bold;
              width: 20rem;
              text-align: right;
            }
          }
        }
      }
    }
    #iframename{
      height: 50.5rem;
    }
    .orders_iframe{
      display: flex;
      height: 51.5rem;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin: 0 2.19rem;
      line-height: 2.5rem;
      .buttons{
        background: #f0406f;
        color: #fff;
        border-radius: 2rem;
        padding: 0 2rem;
        cursor: pointer;
      }
    }
    .order {
      height: 9.68rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 0 2.19rem;
      .order_box {
        display: flex;
        > div {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          &.goods {
            width: 27rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;

            .titleBox {
              width: 22rem;
            }

            .tls {
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              color: #7b7b7b;
              font-size: 0.88rem;
              margin-bottom: 1.25rem;
              line-height: 1.2rem;
            }

            .dl {
              color: #7b7b7b;
              font-size: 0.88rem;

              &:hover {
                cursor: pointer;
                text-decoration: underline;
              }
            }

            > img {
              width: 6rem;
              height: 6rem;
              margin-right: 0.69rem;
            }
          }

          &.type {
            font-size: 0.88rem;
            color: #7b7b7b;
            width: 8rem;
            display: flex;
            flex-direction: column;
            line-height: 1.5;

            .opreate {
              color: #f0406f;
              font-size: 0.88rem;

              &:hover {
                cursor: pointer;
                text-decoration: underline;
              }
            }
          }

          &.orderStatus {
            width: 8rem;
            font-size: 0.88rem;
            line-height: 1.5;

            .status {
              color: #7b7b7b;
              line-height: 1.44rem;
            }

            .again {
              color: #f0406f;
              font-size: 0.88rem;

              &:hover {
                cursor: pointer;
                text-decoration: underline;
              }
            }

            .prize {
              background: #000;
              color: #fff;
              padding: 0.08rem 0.88rem;
              cursor: pointer;

              &:hover {
                opacity: 0.8;
              }
            }
          }

          &.amount {
            font-size: 0.88rem;
            width: 8rem;

            .fee {
              color: #7b7b7b;
            }

            .price {
              line-height: 1.44rem;
              color: #333333;
              font-weight: bold;
            }
          }

          &.op {
            color: #7b7b7b;
            width: 8rem;
            font-size: 0.88rem;
          }
        }
      }
    }
  }
}
</style>
